<template>
 <div>	
	 <div class="banner" @click="handleBannerClick">
		<img class="banner-img" :src="bannerImg">
		<div class="banner-info">
		<div class="banner-title">{{sightName}}</div>
		<div class="banner-number"><span class="iconfont banner-icon">&#xe63e;</span>{{gallaryImgs.length}}</div>
		</div>
	 </div>
	 <common-gallary :imgs="gallaryImgs" v-show="showGallary" @close="handleBannerclose"></common-gallary>
  </div>	
</template>

<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
	name: 'DeatileBanner',
	data () {
		return{
			showGallary:false,
			imgs : ['http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg','http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg']
		}
	},
  props:{
    sightName : String,
    bannerImg : String,
    gallaryImgs : Array
  },
	components:{
	   CommonGallary
	},
	methods:{
	  handleBannerClick () {
	  	this.showGallary = true
	  },
	  handleBannerclose () {
	  	this.showGallary = false
	  }
	}
}
</script>

<style lang="stylus" scoped>
  .banner
  	position:relative
  	overflow:hidden
  	height:0
  	padding-bottom:55%
  	.banner-img
  		width:100%
  	.banner-info
  		display:flex
  		position:absolute
  		left:0
  		right:0
  		bottom:0
  		color:#fff
  		line-height:.6rem
  		background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
  		.banner-title
  			flex:1
  			font-size:.32rem
  			padding:0 .2rem
  		.banner-number
  			padding:0 .4rem
  			height:.4rem
  			line-height:.4rem
  			background:rgb(0,0,0.8)
  			border-radius:.2rem
  			font-size:.24rem
  			margin-top: .1rem
  			.banner-icon
  				font-size:.24rem
  				color:#fff
 	 				
</style>